<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>

<div id="app">
  <h1>{{ msg }}</h1>


  <div>
    <span>用户名</span>
    <input type="text">
  </div>
  <div>
    <span>密码</span>
    <input type="text">
  </div>
  <div>
    <span>手机号</span>
    <input type="text">
  </div>
  <div>
    <span>性别</span>
    <input type="radio">男
    <input type="radio">女
    <input type="radio">未知
  </div>
  <div>
    <span>爱好</span>
    <input type="radio">篮球
    <input type="radio">游泳
    <input type="radio">足球
    <input type="radio">武术
  </div>
  <div>
    <span>地址</span>
    <select>
      <option>西安</option>
      <option>咸阳</option>
      <option>渭南</option>
      <option>安康</option>
      <option>宝鸡</option>
    </select>
  </div>
  <div>
    <span>介绍</span>
    <textarea></textarea>
  </div>
  <div>
    <button>提交</button>
  </div>



  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>


  <input type="text" v-model.trim="uname">
  <button @click="getUName">getUName</button>
  <br>
  <input type="number" placeholder="请输入身高" v-model.number="bmiData.height">
  <br>
  <input type="number" placeholder="请输入体重" v-model.number="bmiData.weight">
  <button @click="calc">计算</button>
  <br>
  <input type="text" v-model.lazy="message">
  <p>{{ message }}</p>
  <br>
  <span>Multiline message is:</span>
  <br>
  <textarea v-model="message" placeholder="add multiple lines"></textarea>
  <p style="white-space: pre-line;">
    {{ message }}
  </p>
  <hr>
  <input
    type="checkbox"
    id="checkbox"
    v-model="checked"
    true-value="yes"
    false-value="no"
  >
  <label for="checkbox">{{ checked }}</label>
  <br>
  <input type="checkbox" id="jack" value="123" v-model="checkedNames">
  <label for="jack">Jack</label>
  <input type="checkbox" id="john" value="约翰" v-model="checkedNames">
  <label for="john">John</label>
  <input type="checkbox" id="mike" v-model="checkedNames">
  <label for="mike">Mike</label>
  <br>
  <span>Checked names: {{ checkedNames }}</span>
  <hr>
  <input type="radio" id="one" value="男" v-model="picked">
  <label for="one">男</label>
  <br>
  <input type="radio" id="two" value="女" v-model="picked">
  <label for="two">女</label>
  <br>
  <span>Picked: {{ picked }}</span>

  <hr>
<!--  <select v-model="selected" multiple>-->
  <!--<select v-model="selected">
    <option disabled value="">请选择</option>
    <option value="AAA">A</option>
    <option value="2B">B</option>
    <option value="333">C</option>
  </select>-->
  <select v-model="selected">
    <option disabled value="">请选择</option>
    <option
      v-for="(item) of options"
      :value="item.value"
    >{{ item.text }}</option>
  </select>
  <span>Selected: {{ selected }}</span>

  <hr>



<!--
v-model
-->
</div>

<script src="js/vue.js"></script>
<script src="js/index.js"></script>
</body>
</html>
